<style lang="less">
@import './common.less';
</style>
<template>
  <div>
    <Card title="导出EXCEL">
      <Row>
        <Button icon="md-download" :loading="exportLoading" @click="exportExcel">导出文件</Button>
      </Row>
    </Card>
    <Row class="margin-top-10">
      <Table style="width: calc(100vw - 256px - 36px - 32px)" :columns="tableTitle" :data="tableData"></Table>
    </Row>
  </div>
</template>
<script>
import excel from '@/libs/excel'
export default {
	name: 'export-excel',
	data() {
		return {
			exportLoading: false,
			tableTitle: [
				{
					title: '一级分类',
					key: 'category1',
				},
				{
					title: '二级分类',
					key: 'category2',
				},
				{
					title: '三级分类',
					key: 'category3',
				},
			],
			tableData: [
				{
					category1: 1,
					category2: 2,
					category3: 3,
				},
				{
					category1: 4,
					category2: 5,
					category3: 6,
				},
				{
					category1: 7,
					category2: 8,
					category3: 9,
				},
			],
		}
	},
	methods: {
		exportExcel() {
			if (this.tableData.length) {
				this.exportLoading = true
				const params = {
					title: ['一级分类', '二级分类', '三级分类'],
					key: ['category1', 'category2', 'category3'],
					data: this.tableData,
					autoWidth: true,
					filename: '分类列表',
				}
				excel.export_array_to_excel(params)
				this.exportLoading = false
			} else {
				this.$Message.info('表格数据不能为空！')
			}
		},
	},
	created() {},
	mounted() {},
}
</script>
